iT邦幫忙

2021 iThome 鐵人賽

DAY 3
0

Div 區塊式HTML中最最最最最常也是一定會用到的

Div 簡單來講就是一個區域。

假設我們的整個視窗是一塊土地,那 Div 就是在畫分這塊土地
像我們現在的畫面中,iT邦幫忙上方藍色的這一整條就是一個區域(Div)
基本上你看到的畫面中,只要有一塊一塊的地方
那基本上就可以把它那一塊一塊的地方都視為不同的區域(Div)

那一個 Div 的寫法如下

<div>
     <h2>我是區域</h2>
</div>

就可以看到他在網頁上就會呈現
https://ithelp.ithome.com.tw/upload/images/20210903/20141189bMMhj7iuMy.jpg

那如果想要在同一個區塊裡再出現兩個區塊該怎麼做呢??

很簡單,只要在一個區塊裡再塞兩個div就可以啦

    <div class="banner1">
        <h2>我是土地</h2>
        <div class="banner">
            <h2>我是區域1</h2>
        </div>
        <div class="banner2">
            <h2>我是區域2</h2>
        </div>
    </div>

他就會長這樣
https://ithelp.ithome.com.tw/upload/images/20210903/20141189nStsl5xk8P.jpg
是不是覺得很好玩呢??沒錯,寫網頁的好處就是可以立刻看到成果,
非常的有成就感呢!!
/images/emoticon/emoticon07.gif

但你一定覺得很奇怪,啊我複製程式碼貼上後怎麼長的超奇怪
沒錯,光是靠上面的程式是沒辦法呈現上面那張圖的,
這時候就要使用CSS來幫我們的區塊去做設定以及美化,
但因為今天講的是區塊,所以我先附上CSS的語法(大家只需要先將以下程式複製貼上即可),目的是先讓大家能夠先做出一個非常簡單的小實作

<style>
    .banner1{
        width: 300px;
        height: 200px;
        border: 2px solid #000;
    }
    .banner{
        display: inline-block;
        background-color: rgb(158, 255, 2);
        width: 100px;
        height: 100px;
    }
    .banner1 h2{
        font-size: 20px;
    }
    .banner2{
        display: inline-block;
        background-color: rgb(158, 255, 2);
        width: 100px;
        height: 100px;
    }
</style>

剩下的我明天再來解釋 如何使用CSS

我們明天鐵人賽Day4見囉!!


上一篇
鐵人賽 Day2 -- Visual Studio Code 一鍵叫出HTML & 唯一好用快捷鍵
下一篇
鐵人賽 Day4 -- 一定要知道的 CSS (一)
系列文
30天後能否自己做出一個簡單便利的訂便當系統(HTML、CSS、BootStrap、PHP、SQL、JavaScrip、JQuery)30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言